<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue+html样式</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="app">
        <div class="header">
            <h1>首页仿写</h1>
        </div>
        
        <div class="separator"></div>
        
        <nav>
            <a href="#" :class="{ active: currentCategory === 'news' }" @click.prevent="changeCategory('news')">新闻</a>
            <a href="#" :class="{ active: currentCategory === 'sports' }" @click.prevent="changeCategory('sports')">体育</a>
            <a href="#" :class="{ active: currentCategory === 'entertainment' }" @click.prevent="changeCategory('entertainment')">娱乐</a>
            <a href="#" :class="{ active: currentCategory === 'finance' }" @click.prevent="changeCategory('finance')">财经</a>
        </nav>
        
        <div class="slider">
            <div class="slider-content" v-for="(slider, index) in sliders" :key="index" v-show="currentSlider === index">
                <h1>{{ slider.text }}</h1>
            </div>
        </div>
        
        <div class="news-section">
            <div class="news-title">{{ newsTitle }}</div>
            <ul class="news-list">
                <li v-for="(item, index) in newsItems" :key="index">{{ item }}</li>
            </ul>
        </div>
        
        <footer>
            版权所有 © 仿写网站
        </footer>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                currentCategory: 'news',
                currentSlider: 0,
                sliders: [
                    { text: 'Slider Image 3' },
                    { text: 'Slider Image 2' },
                    { text: 'Slider Image 1' }
                ],
                newsData: {
                    news: {
                        title: '最新新闻',
                        items: ['新闻标题1', '新闻标题2','新闻标题3','新闻标题4']
                    },
                    sports: {
                        title: '体育资讯',
                        items: ['体育赛事1', '体育赛事2','体育赛事3','体育赛事4']
                    },
                    entertainment: {
                        title: '娱乐新闻',
                        items: ['娱乐标题1', '娱乐标题2', '娱乐标题3', '娱乐标题4']
                    },
                    finance: {
                        title: '财经资讯',
                        items: ['财经新闻1', '财经新闻2','财经新闻3','财经新闻4']
                    }
                }
            },
            computed: {
                newsTitle() {
                    return this.newsData[this.currentCategory].title;
                },
                newsItems() {
                    return this.newsData[this.currentCategory].items;
                }
            },
            methods: {
                changeCategory(category) {
                    this.currentCategory = category;
                },
                updateSlider() {
                    this.currentSlider = (this.currentSlider + 1) % this.sliders.length;
                }
            },
            mounted() {
                setInterval(this.updateSlider, 3000);
            }
        });
    </script>
</body>
</html>